<style lang="less">
.navhead {
	padding: 0 30rpx;
	height: 88rpx;
	background: #fff;
	width: 100%;
	border-bottom: 1px solid #EDEDED;
	position: fixed;
	top: var(--status-bar-height);
	z-index: 99;
	.icon-zuo {
		font-size: 32rpx;
		color: #333;
	}
}
.content{
	margin-top: calc(88rpx + var(--status-bar-height));
	width: 100%;
	flex: 1;
	padding: 0 30rpx;
	box-sizing: border-box;
	.item{
		background: #fff;
		padding: 20rpx;
		margin: 30rpx 0;
		border-radius: 10rpx;
		.top{
			.tag{
				padding: 4rpx 10rpx;
				border-radius: 3rpx;
				background: #FFE680;
				color: #fff;
				font-size: 25rpx;
				word-break: keep-all;
			}
			.title{
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				margin: 0 20rpx;
				font-size: 30rpx;
				font-weight: 600;
				color: #333;
				letter-spacing: 1px;
			}
		}
		.top_2{
			font-size: 25rpx;
			color: #999;
			margin: 20rpx 0;
		}
		&>image{
			width: 100%;
			height: 300rpx;
		}
		.top_3{
			font-size: 28rpx;
			color: #999;
			margin: 20rpx 0;
		}
		.top_4{
			padding: 20rpx 0 0;
			border-top: 1px solid rgba(0,0,0,0.05);
			&>text{
				font-size: 28rpx;
			}
		}
	}
}
</style>
<template>
	<view style="display: flex;flex-direction: column;height: 100vh;background: rgba(0,0,0,0.03);">
		<view class="status_bar status_bar_bak"></view>
		<view class="navhead flex_r_between">
			<i class='iconfont icon-zuo' @click='$back'></i>
			<text>我的消息</text>
			<text></text>
		</view>
		
		<scroll-view scroll-y="true" class="content">
			<view class="item" v-for="i in 99" :key="i">
				<view class="top flex_v_venter">
					<view class="tag">
						活动
					</view>
					<text class="title">
						专场专卖会专场专卖会专场专卖会专场专卖会
					</text>
				</view>
				<view class="top_2">
					2020-20-20
				</view>
				<image src="../../static/img/cat.jpg" mode=""></image>
				<view class="top_3">
					一键进群，秒速脱单
				</view>
				<view class="top_4 flex_r_between">
					<text>立即参与</text>
					<i class='iconfont icon-right'></i>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>


